<template>
  <div class="about">
    <h1>多物体运动</h1>
   <div ref='ulParent'>
    <p></p>
    <p></p>
    <p></p>
    <p class="last-p">有border之后修改过问题的元素</p>
    <p class="last-p">有border之后有问题的元素</p>
   </div>
  
  </div>
</template>
<script>
 import  funs  from '../../utils/animationUtil.js'
  console.log(funs)
export default {
  name: 'test',
  mounted(){
  let allBoxs=this.$refs.ulParent.getElementsByTagName('p');
    //注意let 换成var就不行,var不是块级作用域，当for循环的时候，会直接循环完，最后绑定的是5，所以报错找不到
  for(let i=0,len=allBoxs.length;i<len;i++){
    console.log(i)
    allBoxs[i].addEventListener('mouseover',()=>{
        if(i===4){
          funs.duowutiyundong_wrong(allBoxs[i], 600)
        }else{
           funs.duowutiyundong(allBoxs[i],'width',600)
        }
    })
    allBoxs[i].addEventListener('mouseout',()=>{
       if(i===4){
          funs.duowutiyundong_wrong(allBoxs[i], 150)
        }else{
          funs.duowutiyundong(allBoxs[i],'width',150)
        }
        
    })
  }
  
  },
  methods:{

  }
}
</script>
<style scoped>
 p{
   width: 150px;
   height: 50px;
   background: royalblue;
   margin: 20px 0;
 }
 .last-p{
   border: 3px solid red;
 }
</style>
